<!--
 * @Author: 星孑
 * @Date: 2022-03-25 10:54:44
 * @LastEditors: 星孑
 * @LastEditTime: 2022-04-11 11:17:48
 * @FilePath: /admin/src/views/layoutLogin/components/login.vue
 * @Description:
-->
<template>
  <div class="login p-16">
    <el-row>
      <h4>后台登陆系统</h4>
    </el-row>
    <el-row>
      <el-input
        v-model="user.username"
        placeholder="邮箱"
        @keyup.enter.native="login"
      />
    </el-row>
    <el-row>
      <el-input
        v-model="user.password"
        placeholder="密码"
        show-password
        class="x-input-show-password"
        @keyup.enter.native="login"
      />
    </el-row>
    <el-row class="login__button">
      <el-button v-loading="loading" type="primary" @click="login">
        登录
      </el-button>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      user: {
        username: '',
        password: ''
      }
    }
  },
  computed: {},
  created() {},
  methods: {
    login() {
      this.loading = true
      this.$store.dispatch('LoginByUsername', this.user).then((res) => {
        this.loading = false
        this.$router.replace('/')
      }, e => {
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  text-align: center;
  padding: 50px;
  background: #ffffff;
  .el-row {
    margin-bottom: 40px;
    .el-input,
    .el-button {
      width: 350px;
    }
  }
}
</style>
